<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:34:"theme\test\default\index\index.php";i:1537192195;}*/ ?>
<?php defined("IN_SYSTEM") or die("Access Denied");/* 防止模板被盗 */?>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        background-color: #00a2d4;
    }

    /*顶部样式*/
    #top{
        height: 60px;
        border-bottom:1px solid #CCCCCC;
    }
    #top div{
        display: inline-block;
    }
    .menu{
        float: right;
    }
    .menu ul{
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        list-style: none;
    }
    .menu ul li{
        width: 60px;
        font: 16px/2.5 'Microsoft yahei';
        color: white;
    }
    /*#banner{*/
        /*display: flex;*/
        /*justify-content:center;*/
        /*height: 300px;*/
        /*border: 1px solid pink;*/
    /*}*/
    #banner div{
        width: 800px;
        height: 300px;
        border: 1px solid pink;
    }

    /*正文样式*/
    #main{
        position:relative;
    }
    .box{
        padding: 15px 0 0 15px;
        float: left;
    }
    .box header {
        display:flex;
        /*justify-content: center;*/
        align-items:center;
        height: 60px;
    }
    .box header div{
        line-height: 60px;
    }
    .box header div img{
        width: 40px;
        height: 40px;
    }
    .pic{
        border:1px solid #dddddd;
        border-radius:3px;
    }
    .pic img{
        width: 165px;
    }
    .content{
        color: #CCCCCC;
        font-family: Consolas, "Liberation Mono", Courier, "微软雅黑";
        text-indent: 25px;
        width: 165px;
    }
</style>
<header>
    <title>my-homepage</title>
</header>
<body>
<!--菜单-->
<div id="top">
    <div class="icon">
        <label>1111111</label>
    </div>
    <div class="searchBox">
        <input>
    </div>
    <div class="menu">
        <ul>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
            <li>首页</li>
        </ul>
    </div>
</div>
<!--<div id="banner">-->
<!--    <div>-->
<!--        <img>-->
<!--    </div>-->
<!--</div>-->
<div id="main" class="container-fluid">
    <article class="box">
        <header>
            <div>
                <img src="/theme/test/default/static/image/1.jpg">
            </div>
            <div>
                <label>啦啦啦啦啦啦啦啦</label>
            </div>
        </header>
        <section class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </section>
    </article>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </div>
        <div class="content">
            <label>一个网站长得好看能吃吗？还真能！一个“秀色可餐”的网站不仅能增加人们的食欲，还能让你的营业额蹭蹭往上涨！但是，一个长得好看却只能活在电脑端的网站，真的不能吃！2016年，已经有超过80%的网民有在移动端购物的经历，如果你的网站不能在移动端“颜值在线”，就别怪客户都被别家揽走了！</label>
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/4.jpg">
        </div>
    </div><div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/4.jpg">
        </div>
    </div><div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/4.jpg">
        </div>
    </div><div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/4.jpg">
        </div>
    </div><div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/4.jpg">
        </div>
    </div><div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="/theme/test/default/static/image/6.jpg">
        </div>
    </div>
</div>
</body>

<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script>

   $(window).on('load',function () {
       //1.实现瀑布流布局
       waterFall();

       //2.滚动加载
       $(window).on('scroll',function () {
           //判断是否加载
           if (checkWillLoad())
           {
               ////创造假数据
               var data = {'dataImg':[{'img':'1.jpg'},{'img':'2.jpg'},{'img':'3.jpg'},{'img':'4.jpg'},{'img':'6.jpg'},{'img':'6.jpg'}]};
               //遍历创建盒子
               $.each(data.dataImg,function (index,value)
               {
                   //创建一个div标签 设置它的类为'box' 添加到'main'里面去
                   var newBox = $('<div>').addClass('box').appendTo($('#main'));
                   var newPic = $('<div>').addClass('pic').appendTo($(newBox));
                   //创建img  取出遍历的对象value的img属性对应的值
                   $('<img>').attr('src','/theme/test/default/static/image/'+$(value).attr('img')).appendTo($(newPic));
               })
               //1.实现瀑布流布局
               waterFall();
           }
       });
   });

   //实现瀑布流布局
   function waterFall () {
       //拿到所有的盒子
       var allBox = $('#main > .box');
       //取出其中一个盒子的宽度
       var boxWidth = $(allBox).eq(0).outerWidth();
       //取出屏幕的高度
       var screenWidth = $(window).width();
       //求出列数 //取整函数取整
       var cols = Math.floor( screenWidth/boxWidth);
       //父标签居中
       $('#main').css({
           'width':cols * boxWidth + 'px',
           'margin':'0 auto'
       });
       //对子盒子定位
       var heightArr = [];
       //遍历
       $.each(allBox,function (index,value) {
           //取出单独盒子的高度
           var boxHeight = $(value).outerHeight();
           //判断是否第一行
           if(index < cols)
           {
               heightArr[index] = boxHeight;
           }
           else  //剩余的盒子要瀑布流布局
           {
               //求出最矮的盒子高度
               var minBoxHeight = Math.min.apply(null,heightArr);
               //取出最矮高度对应的索引  封装了js的这个方法
               var minBoxIndex = $.inArray(minBoxHeight,heightArr);
               //定位
               $(value).css({
                   'position':'absolute',
                   'top':minBoxHeight + 'px',
                   'left':minBoxIndex * boxWidth + 'px'
               });
               //更新数组中最矮的高度
               heightArr[minBoxIndex] += boxHeight;
           }
       })

   }

   //判断是否符合加载条件
   function checkWillLoad() {
       //直接取出最后一个盒子
       var lastBox = $('#main > div').last();
       //取出最后一个盒子高度的一半 + 头部偏离的位置
       var lastBoxDis = $(lastBox).outerHeight() + $(lastBox).offset().top;
       //求出浏览器的高度
       var clientHeight = $(window).height();
       //求出页面偏离浏览器高度
       var scrollTopHeight = $(window).scrollTop();
       //比较返回
       return lastBoxDis <= clientHeight + scrollTopHeight;

   }

</script>